<template>
  <div class="navhead flexab nowrap">
    <img src="" alt="" />
    <div class="rig flex flexa">
      <el-tooltip placement="bottom">
        <template #content>
          <ul class="headul1">
            <li @click="logout">
              <img src="" alt="" />
              &nbsp;&nbsp; 退出登录
            </li>
          </ul>
        </template>
        <div class="flex flexa colf font12 point padl20">
          <img class="radius50p" :src="utils.loadImg('head.png')" width="28" height="28" />
          &nbsp;&nbsp; {{ userinfo ? userinfo.username : '请先登录' }}
          <i class="el-icon-caret-bottom el-icon--right colf"></i>
        </div>
      </el-tooltip>
    </div>
  </div>
  <div class="side navbar">
    <el-scrollbar>
      <el-menu :collapse="isCollapse" class="el-menu-vertical-demo" @select="handleClick" :default-active="current"
        background-color="#25272B" text-color="#fff" :router="true" active-text-color="#fff">
        <div v-for="(item, index) in barList" :key="index">
          <el-sub-menu :index="String(index)" v-if="item.children && item.children.length > 0">
            <template #title>
              <el-icon v-if="current == index">
                <img :src="utils.loadImg('icon1.png')" alt="" />
              </el-icon>
              <el-icon v-else><img :src="utils.loadImg('icon1-a.png')" alt="" />
              </el-icon>
              &nbsp;
              <span v-if="!isCollapse">{{ item.title }} </span>
            </template>
            <el-menu-item v-for="(ite, idx) in item.children" :key="idx" :index="ite.url" :route="ite.url">
                  {{ "• \u00A0\u00A0" }}{{ ite.title }}
                </el-menu-item>
          </el-sub-menu>

          <el-menu-item :index="item.url" :route="item.url" v-else>
            <img v-if="current == item.path" :src="utils.loadImg('icon1.png')" alt="" width="16" height="16" />
            <img v-else :src="utils.loadImg('icon1-a.png')" alt="" width="16" height="16" />
            &nbsp;
            <template #title>
              {{ item.title }}
            </template>
          </el-menu-item>
        </div>
      </el-menu>
    </el-scrollbar>
    <div @click="isCollapse = !isCollapse" class="flex flexa open">
      <img v-if="isCollapse" :src="utils.loadImg('cols2.png')" alt="" width="16" height="16" />
      <img v-if="!isCollapse" :src="utils.loadImg('cols1.png')" alt="" width="16" height="16" />
      &nbsp;
    </div>
  </div>


  <div v-if="myroute.meta.titL" :class="['navmb', { navpl: isCollapse }]">
    <div class="padr14 point" @click="$router.go(-1)" v-show="myroute.meta.back">
      <img src="../assets/imgs/back.png" class="block" alt="">
    </div>
    <div class="flex flexa" v-for="(item, index) in myroute.meta.titL" :key="index">
      <span v-if="index > 0">&nbsp; >&nbsp; </span>
      <span :class="index + 1 == myroute.meta.titL.length && index != 0 ? 'colzhuti' : ''
        ">
        {{ item }}
      </span>
    </div>
  </div>
  <div :class="['navmin', { navpl: isCollapse }]">
    <p v-if="myroute.meta.titL" class="h50"></p>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" v-if="$route.meta.keepAlive" :key="$route.name" />
      </keep-alive>
      <component :is="Component" v-if="!$route.meta.keepAlive" :key="$route.name" />
    </router-view>
  </div>
  <p></p>
</template>
<script>

export default {
  data() {
    return {
      // locale: zhCn,
      barList: [],
      // barList:[{"children":[{"id":300,"selectedIcon":"merchant-a.png","title":"报台统计","unselectedIcon":"merchant-a.png","url":"/tongji"},{"id":301,"selectedIcon":"merchant-a.png","title":"日志操作记录","unselectedIcon":"merchant-a.png","url":"/log"}],"id":299,"selectedIcon":"merchant-a.png","title":"统计管理","unselectedIcon":"merchant-a.png","url":"/tongji"},{"id":306,"selectedIcon":"merchant-a.png","title":"手术类型管理","unselectedIcon":"merchant-a.png","url":"/shoushuleixingliebiao"},{"id":307,"selectedIcon":"merchant-a.png","title":"产品管理","unselectedIcon":"merchant-a.png","url":"/chanpinliebiao"},{"id":308,"selectedIcon":"merchant-a.png","title":"经销商审核","unselectedIcon":"merchant-a.png","url":"/jingxiaoshenhe"},{"id":302,"selectedIcon":"merchant-a.png","title":"经销商管理","unselectedIcon":"merchant-a.png","url":"/jingxiaoshang"},{"id":318,"selectedIcon":"merchant-a.png","title":"报台审核","unselectedIcon":"merchant-a.png","url":"/baotaishenhe"},{"id":303,"selectedIcon":"merchant-a.png","title":"报台管理","unselectedIcon":"merchant-a.png","url":"/baotaiguanli"},{"id":304,"selectedIcon":"merchant-a.png","title":"医院管理","unselectedIcon":"merchant-a.png","url":"/hospital"},{"id":305,"selectedIcon":"merchant-a.png","title":"报台员管理","unselectedIcon":"merchant-a.png","url":"/user"},{"id":317,"selectedIcon":"merchant-a.png","title":"销售管理","unselectedIcon":"merchant-a.png","url":"/xiaoshouguanli"}],
      barList2: [  //新增页面

      ],
      current: this.$route.path,
      myroute: this.$route,
      isCollapse: false,
      screenWidth: document.body.clientWidth,
      userinfo: {},
    };
  },
  watch: {
    $route(val, old) {
      this.myroute = val;

      let htab = val.meta.tabType ? old.meta.tab : val.meta.tab;
      this.$store.commit('setRouteCurrent', htab);

      console.log(htab, 'htab----')
      if (htab && htab != this.current) {
        this.current = htab;
      }
    },
    screenWidth(val) {
      this.screenWidth = val;
      if (val < 1100) {
        this.isCollapse = true;
      } else {
        this.isCollapse = false;
      }
    },
  },
  mounted() {
    // console.log('store.menuListstore.menuListstore.menuList',store.menuList)
    let store = this.$store.state;
    this.userinfo = store.info;
    if (store.menuList) {
      this.barList = store.menuList;
    }

    this.myroute = this.$route;

    let routeCurrent = this.$store.state.routeCurrent;
    this.current = routeCurrent ? routeCurrent : this.$route.meta.tab;
    console.log(routeCurrent, 'this.$store.state.routeCurrent')

    const that = this;
    window.onresize = () => {
      return (() => {
        that.screenWidth = document.body.clientWidth;
      })();
    };
  },
  methods: {
    saveNavState(url) {
      console.log('url', url)
    },
    logout() {
      localStorage.clear();
      // console.log(localStorage.getItem('token'),'ooooooooooooooo')
      this.$store.commit('setToken', '');
      this.$router.push(`/login?redirect=`);
    },

    handleClick(e) {
      // console.log('click ', e, this.current);
      this.current = e;
    },


    showMsg() {
    },

  },
};
</script>
<style lang="scss" scoped>
:deep .el-menu {
  border-right: none;
}

:deep .el-menu-item.is-active {
  background: #006dff;
}

.hmsg {
  margin-top: -11px;

  .hmsgleft {
    background: #f8f8f8;
    width: 250px;
    height: 600px;
    overflow: hidden;
    min-width: 250px;
    padding-bottom: 15px;
    display: flex;
    flex-direction: column;

    .leflistact {
      background: #e1e2e3;
    }

    .leflist {
      padding: 14px 14px 17px 18px;
      border-bottom: 1px solid #e7eaef;
      position: relative;
      cursor: pointer;

      .noc {
        position: absolute;
        left: 8px;
        top: 21px;
        background: #ff6a00;
        width: 6px;
        height: 6px;
        border-radius: 60%;
      }
    }
  }

  .hmsgrig {
    padding: 20px;
    border: 1px solid #e7eaef;
    width: 100%;
  }
}

.navbtn1 {
  border-radius: 0px !important;
  height: 36px;
  width: 110px;
}

.w125 {
  width: 125px;
}

.borb {
  border-bottom: 1px solid #e7eaef;
}

.msgnum {
  // background: $primary-color;
  width: 20px;
  min-width: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  color: #fff;
  font-size: 10px;
  margin-left: 4px;
}

.headul2 {
  display: flex;
  justify-content: center;
  font-size: 14px;
  color: #000000;

  li {
    overflow: hidden;
    margin: 0 12px;
    cursor: pointer;

    div {
      padding: 0 10px;
    }

    p {
      width: 100%;
      height: 3px;
      background: #fff;
      margin-top: 10px;
      z-index: 2;
    }

    >.act {
      // background: $primary-color;
    }
  }
}

.headul1 {
  li {
    display: flex;
    height: 36px;
    color: #fff;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 144px;
  }

  // li:nth-child(1) {
  //   border-bottom: 0.5px solid rgb(99, 98, 98);
  // }
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}

.open {
  height: 56px;
  padding: 0 20px;
  cursor: pointer;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  background: #27303f;
  z-index: 2;
}

.open:hover {
  background-color: rgb(30, 31, 34);
}

.navmin {
  background: #f6f6f6;
  min-height: 100vh;
  box-sizing: border-box;
  padding-top: 70px;
  padding-right: 20px;
  padding-left: 220px;
  padding-bottom: 20px;
  transition: padding-left 0.5s;
  overflow: hidden;
}

.navpl {
  padding-left: 83px !important;
}

.navmb {
  position: fixed;
  left: 0px;
  padding-left: 220px;
  top: 50px;
  z-index: 8;
  background: #fff;
  font-size: 16px;
  height: 50px;
  display: flex;
  align-items: center;
  width: 100%;
  color: #151822;
  font-weight: 600;
  transition: padding-left 0.5s;
}

.navhead {
  background: #34383f;
  height: 50px;
  padding: 0 25px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 22;
  box-sizing: border-box;
}

.side {
  padding-top: 50px;
  padding-bottom: 60px;
  background: #25272b;
  position: fixed;
  box-sizing: border-box;
  height: 100%;
  left: 0;
  z-index: 10;
  top: 0;
  border-right: solid 1px var(--el-menu-border-color);
}

.navmsg {
  height: 50px;
  padding: 0 15px;
  display: flex;
  cursor: pointer;
  align-items: center;
}

.navmsg:hover {
  background: #4c4f55;
}

.inline-input {
  width: 232px;
  margin-right: 30px;
}
</style>